<template>
    <view class="c-con">
        <view class="c-box" @click="setFocus" :class="fixed?'fixed':''">
            <view class="c-input a-flex-center c-not-focus" v-if="!focus">
                <image src="/static/ui/ico-search.png"></image>
                <text>{{placeholder}}</text>
            </view>
            <view v-else class=" a-flex-space-between c-focus">
                <input placeholder="请输入" class="c-input" confirm-type="search" @confirm="confirm" @input="onInput"/>
                <text @click.stop="cancel" class="c-cancel">取消</text>
            </view>
        </view>
    </view>
    <!--
    <my-search placeholder="输入名称搜索" @search="" @on-input="" @cancel=""></my-search>
    -->
</template>

<script>
    export default {
        name: "my-search",
        props: {
            placeholder: {
                type: String,
                default: '请输入关键字'
            },
            showConfirm: {
                type: Boolean,
                default: false
            },
            showCancel: {
                type: Boolean,
                default: true
            },
            fixed: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                focus: false,
                keyword: ''
            }
        },
        methods: {
            setFocus() {
                if (!this.focus) {
                    this.focus = true;
                }
            },
            cancel() {
                this.focus = false;
                this.keyword = '';
                this.$emit('cancel');
            },
            confirm() {
                this.$emit('search', this.keyword);
            },
            onInput(e) {
                this.$emit('on-input', e.target.value);
            }
        }
    }
</script>

<style scoped lang="less">
    .c-box {
        line-height: unit(60, rpx);
        padding: unit(14, rpx) unit(15, rpx);
        box-sizing: border-box;
        background-color: #efeff4;

        .c-input {
            background-color: white;
            border-radius: unit(10, rpx);
            border: solid unit(1, rpx) #e6e6ea;
            flex: 1;
        }

        .c-not-focus {
            color: #b2b2b2;
            font-size: unit(26, rpx);

            text {
                margin-left: unit(10, rpx);
            }

            image {
                width: unit(26, rpx);
                height: unit(26, rpx);
            }
        }

        .c-focus {
            input {
                flex: 1;
                box-sizing: border-box;
                padding: 0 unit(12, rpx);
                font-size: unit(26, rpx);
                line-height: unit(60, rpx);
                height: unit(60, rpx);
            }

            .c-cancel {
                font-size: unit(26, rpx);
                margin-left: unit(10, rpx);
                color: #666666;
            }
        }
    }

    .fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: unit(88, rpx);
    }
    .c-con{
        height: unit(88,rpx);
    }
</style>
